<template>
  <!-- 文字缩放测试 -->
  <div class="page-fireworks">
    <canvas ref="canvas" class="fireworks-canvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      fireworks: [],
      particles: [],
      colors: [
        // 红色系
        '#FF0000', '#FF1A1A', '#FF3333', '#FF4D4D', '#FF6666',
        '#FF8080', '#FF9999', '#FFB3B3', '#FFCCCC', '#FFE6E6',
        // 金色系
        '#FFD700', '#FFC107', '#FFB300', '#FFA000', '#FF8F00',
        '#FFE082', '#FFD54F', '#FFCA28', '#FFC107', '#FFB300',
        // 橙红色系
        '#FF4500', '#FF5722', '#FF7043', '#FF8A65', '#FFAB91',
        '#FF6B6B', '#FF5252', '#FF4081', '#F50057', '#D500F9',
        // 暖黄色系
        '#FFA000', '#FFB300', '#FFC107', '#FFCA28', '#FFD54F',
        '#FFE082', '#FFECB3', '#FFF8E1', '#FFE0B2', '#FFCCBC'
      ],
      trails: [], // 用于存储拖尾效果
    };
  },
  mounted() {
    this.initCanvas();
    this.animate();
    // 降低发射频率到 2 秒一次
    setInterval(() => this.createFirework(), 2000);
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas;
      this.ctx = this.canvas.getContext('2d');
      this.resizeCanvas();
      window.addEventListener('resize', this.resizeCanvas);
    },
    resizeCanvas() {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    },
    createFirework() {
      const x = Math.random() * this.canvas.width;
      const targetY = this.canvas.height * (0.4 + Math.random() * 0.2);
      const speed = 8 + Math.random() * 3;
      const color = this.colors[Math.floor(Math.random() * this.colors.length)];
      
      this.fireworks.push({
        x,
        y: this.canvas.height,
        targetY,
        speed,
        color,
        exploded: false,
        size: 2 + Math.random() * 1.5,
        trail: [],
        velocity: {
          x: Math.cos(Math.random() * Math.PI * 2) * 0.5,
          y: -speed
        }
      });
    },
    explodeFirework(firework) {
      const particleCount = 120;
      const baseSize = 2;
      
      const baseColor = firework.color;
      const colorVariations = this.generateColorVariations(baseColor);
      
      const centerX = firework.x;
      const centerY = firework.y;
      
      // 创建爆炸效果
      for (let i = 0; i < particleCount; i++) {
        const angle = (Math.PI * 2 * i) / particleCount;
        const speed = 2 + Math.random() * 2; // 添加一些随机性
        const size = baseSize * (0.8 + Math.random() * 0.4); // 添加一些大小变化
        
        const particleColor = colorVariations[Math.floor(Math.random() * colorVariations.length)];
        
        this.particles.push({
          x: centerX,
          y: centerY,
          vx: Math.cos(angle) * speed + (Math.random() - 0.5) * 0.5, // 添加一些随机偏移
          vy: Math.sin(angle) * speed + (Math.random() - 0.5) * 0.5,
          color: particleColor,
          alpha: 1,
          size: size,
          gravity: 0.08 + Math.random() * 0.04, // 添加一些重力变化
          decay: 0.008 + Math.random() * 0.004 // 添加一些衰减变化
        });
      }
    },
    
    // 生成颜色变体
    generateColorVariations(baseColor) {
      const variations = [baseColor];
      const [r, g, b] = this.hexToRgb(baseColor).split(',').map(Number);
      
      // 生成更多相近的颜色变体，偏向红色和金色
      for (let i = 0; i < 8; i++) {
        const variation = {
          r: Math.min(255, Math.max(0, r + (Math.random() * 40 - 20))),
          g: Math.min(255, Math.max(0, g + (Math.random() * 30 - 15))),
          b: Math.min(255, Math.max(0, b + (Math.random() * 20 - 10)))
        };
        variations.push(`rgb(${Math.round(variation.r)}, ${Math.round(variation.g)}, ${Math.round(variation.b)})`);
      }
      
      // 添加金色变体
      const golden = {
        r: Math.min(255, Math.max(0, r + 30)),
        g: Math.min(255, Math.max(0, g + 20)),
        b: Math.min(255, Math.max(0, b - 20))
      };
      variations.push(`rgb(${Math.round(golden.r)}, ${Math.round(golden.g)}, ${Math.round(golden.b)})`);
      
      // 添加暖色调变体
      const warm = {
        r: Math.min(255, Math.max(0, r + 20)),
        g: Math.min(255, Math.max(0, g + 10)),
        b: Math.min(255, Math.max(0, b - 10))
      };
      variations.push(`rgb(${Math.round(warm.r)}, ${Math.round(warm.g)}, ${Math.round(warm.b)})`);
      
      return variations;
    },
    
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? 
        `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : 
        '255, 255, 255';
    },
    animate() {
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

      // 更新和绘制烟花
      for (let i = this.fireworks.length - 1; i >= 0; i--) {
        const firework = this.fireworks[i];
        if (!firework.exploded) {
          firework.y -= firework.speed;
          
          // 添加简单的拖尾效果
          this.ctx.beginPath();
          this.ctx.moveTo(firework.x, firework.y);
          this.ctx.lineTo(firework.x, firework.y + 10);
          this.ctx.strokeStyle = firework.color;
          this.ctx.lineWidth = 2;
          this.ctx.stroke();
          
          // 绘制烟花主体
          this.ctx.beginPath();
          this.ctx.arc(firework.x, firework.y, 2, 0, Math.PI * 2);
          this.ctx.fillStyle = firework.color;
          this.ctx.fill();

          if (firework.y <= firework.targetY) {
            firework.exploded = true;
            this.explodeFirework(firework);
            this.fireworks.splice(i, 1);
          }
        }
      }

      // 更新和绘制粒子
      for (let i = this.particles.length - 1; i >= 0; i--) {
        const particle = this.particles[i];
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.vy += particle.gravity;
        particle.alpha -= particle.decay;
        particle.size *= 0.99; // 粒子逐渐变小

        // 使用简单的发光效果
        this.ctx.beginPath();
        this.ctx.arc(particle.x, particle.y, particle.size * 1.5, 0, Math.PI * 2);
        this.ctx.fillStyle = `rgba(${this.hexToRgb(particle.color)}, ${particle.alpha * 0.3})`;
        this.ctx.fill();
        
        this.ctx.beginPath();
        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        this.ctx.fillStyle = `rgba(${this.hexToRgb(particle.color)}, ${particle.alpha})`;
        this.ctx.fill();

        if (particle.alpha <= 0) {
          this.particles.splice(i, 1);
        }
      }

      requestAnimationFrame(this.animate);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  }
};
</script>

<style lang="less" scoped>
.page-fireworks {
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
  
  .fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
